<script setup lang="ts">
import headerList from "./commponents/header-list.vue";
const imgList = [
  {
    src: "/src/static/header-img/1.png",
    name: "健康饮食",
  },
  {
    src: "/src/static/header-img/2.png",
    name: "母婴",
  },
  {
    src: "/src/static/header-img/3.png",
    name: "减脂",
  },
  {
    src: "/src/static/header-img/4.png",
    name: "运动",
  },
  {
    src: "/src/static/header-img/5.png",
    name: "慢性病",
  },
  {
    src: "/src/static/header-img/6.png",
    name: "儿童健康",
  },
  {
    src: "/src/static/header-img/7.png",
    name: "心理健康",
  },
  {
    src: "/src/static/header-img/8.png",
    name: "医学常识",
  },
];
const tab = ref<number>(0);
const navData = ["推荐", "关注"];
</script>

<template>
  <!-- 健康百科 -->
  <div class="" style="height: calc(100vh - 100rpx); overflow-y: auto; background-color: #fff">
    <view style="position: relative">
      <view
        style="
          display: flex;
          align-items: center;
          width: 100%;
          height: 200rpx;
          background-color: #4fa4f3;
        "
      >
        <view style="width: 40%; margin-left: 5%; color: #fff">健康百科</view>
        <view style="width: 60%">
          <wd-search placeholder-left placeholder="疾病/症状/医生/健康知识" hide-cancel />
        </view>
      </view>
      <view style="height: 500rpx">
        <view
          style="
            position: absolute;
            top: 200rpx;
            margin-top: -40rpx;
            background-color: #fff;
            border-radius: 40rpx 40rpx 0 0;
          "
        >
          <view style="margin: 40rpx; font-weight: 700; background-color: #fff">热门话题</view>
          <view
            style="
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-around;
            "
          >
            <view
              v-for="item in imgList"
              :key="item.name"
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 20%;
                margin-bottom: 40rpx;
                margin-left: 10rpx;
              "
            >
              <view>
                <img
                  style="width: 80%; margin-bottom: 20rpx; margin-left: 10rpx; text-align: center"
                  :src="item.src"
                  alt=""
                />
              </view>
              <view>{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="margin-top: 40rpx">
      <wd-tabs v-model="tab" swipeable>
        <block v-for="(item, index) in navData" :key="item">
          <wd-tab :title="item">
            <scroll-view scroll-y>
              <headerList />
            </scroll-view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
  </div>
</template>

<style lang="scss" scoped>
.wd-search[data-v-4ebafd4c] {
  font-size: 20rpx;
  background-color: #4fa4f3;
}

:deep() {
  .wd-search__input {
    background-color: rgba(#4fa4f3, 0.7);
  }

  .wd-search__placeholder-txt[data-v-4ebafd4c] {
    width: 240rpx;
    font-size: 21rpx;
    color: #ccc;
  }

  [data-v-4ebafd4c] .wd-search__search-left-icon {
    color: #ccc;
  }

  .wd-tabs[data-v-c72f40b5] {
    // margin-left: 5%;
    box-sizing: border-box;
    width: 30%;
    // margin-left: 20rpx;
    padding: 20rpx;
  }

  .wd-tabs__container {
    box-sizing: border-box;
    width: 95vw;
    padding: 5%;
  }
}
</style>
